<template>
  <div class="text" ref="textContainer">
    <textarea
      ref="commentInput"
      v-model="comment"
      @input="checkLength"
      :placeholder="`回复${replyUsername}`"
      maxlength="500"
    ></textarea>
    <div class="opera-btn">
      <el-popover ref="popoverRef" placement="bottom" trigger="click">
        <emoji-picker @emoji-click="addEmoji"></emoji-picker>
        <svg-icon slot="reference" icon-file-name="smile"></svg-icon>
      </el-popover>
      <div class="right">
        <div class="char-counter">{{ comment.length }}/500</div>
        <el-button
          type="primary"
          v-loading="replyBtnLoading"
          :disabled="!comment"
          @click="sendReplyComment"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(100, 0, 0, -1)"
          >回 复</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import "emoji-picker-element";
export default {
  props: {
    replyUsername: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      comment: "",
      timeoutId: null, // 存储 setTimeout 的 ID
    };
  },
  methods: {
    // 回复评论，向父组件发送消息并将输入内容传递
    sendReplyComment() {
      this.$emit("send-reply-comment", this.comment);
      this.comment = "";
      this.$emit("comment-blur");
    },
    // 添加表情
    addEmoji(event) {
      const emoji = event.detail.unicode;
      this.comment += emoji;
      // 关闭表情选择器弹出框
      this.$nextTick(() => {
        this.$refs.popoverRef.doClose();
      });
    },
    checkLength() {
      // 确保字符数不超过500
      if (this.comment.length > 500) {
        this.comment = this.comment.slice(0, 500);
      }
    },
    handleClickOutside(event) {
      if (!this.$refs.textContainer.contains(event.target)) {
        // 点击不在 text 内，向父组件发送消息
        this.$emit("comment-blur");
      }
    },
  },
  computed: {
    ...mapState({
      replyBtnLoading: (state) => state.Comment.replyBtnLoading,
    }),
  },
  mounted() {
    this.$refs.commentInput.focus();
    this.timeoutId = setTimeout(() => {
      document.addEventListener("click", this.handleClickOutside);
    }, 200);
  },
  beforeDestroy() {
    if (this.timeoutId) {
      clearTimeout(this.timeoutId); // 清除所有挂起的 setTimeout
    }
    document.removeEventListener("click", this.handleClickOutside);
  },
};
</script>

<style lang="less" scoped>
.text {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border: 1px solid #409eff;
  border-radius: 5px;
  textarea {
    font-size: 16px;
    border-radius: 5px;
    padding: 10px;
    box-sizing: border-box;
    width: 100%;
    border: none;
    background-color: transparent;
    resize: none;
    height: 60px;
    &:focus {
      border: none;
      outline: none;
      background-color: #fff;
    }
  }
  .opera-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 0 10px 10px 10px;
    svg {
      width: 25px;
      height: 25px;
      color: #8a919f;
      cursor: pointer;
    }
    .right {
      display: flex;
      align-items: center;
      gap: 10px;

      .char-counter {
        text-align: right;
        color: #8a919f;
      }
    }
  }
}
</style>

<style scoped>
</style>